<script setup>
import { ref } from 'vue'

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({
      title: '',
      content: '',
      tags: [],
      status: 'draft'
    })
  }
})

const emit = defineEmits(['update:modelValue', 'submit', 'cancel'])

const form = ref({ ...props.modelValue })

const handleSubmit = () => {
  emit('submit', form.value)
}
</script>

<template>
  <el-form :model="form" label-position="top">
    <el-form-item label="标题" required>
      <el-input v-model="form.title" />
    </el-form-item>
    <el-form-item label="内容" required>
      <el-input v-model="form.content" type="textarea" :rows="6" />
    </el-form-item>
    <el-form-item label="标签">
      <el-select
        v-model="form.tags"
        multiple
        filterable
        allow-create
        default-first-option
        placeholder="请选择或输入标签"
      >
        <el-option
          v-for="tag in form.tags"
          :key="tag"
          :label="tag"
          :value="tag"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="form.status">
        <el-option label="草稿" value="draft" />
        <el-option label="已发布" value="published" />
        <el-option label="已归档" value="archived" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="$emit('cancel')">取消</el-button>
    </el-form-item>
  </el-form>
</template>
